<template>
  <div :class="isFullScreen ? 'content fullContent' : 'content'">
    <div style="height: 100%; overflow-y: auto; overflow-x: hidden">
      <el-row
        :gutter="10"
        class="screen"
        style="min-height: 440px; overflow: auto"
      >
        <el-col :span="16" class="elcol">
          <el-row
            class="left-top"
            :gutter="10"
            style="margin-bottom: 10px; height: calc(50% - 5px)"
          >
            <el-col v-if="isEsUser()" :span="12" class="elcol">
              <div class="left drawbg">
                <div class="title">案件高发地</div>
                <div id="highrate" class="chartbg">
                  <ul class="drawSelf" v-if="highrateData">
                    <li
                      v-for="(item, index) in highrateData"
                      :key="index"
                      class="drawSelfLi"
                      :data-title="
                        '案件高发地' + '\r' + item.name + '：' + item.value
                      "
                    >
                      <div class="inlineB progress">
                        <div
                          class="autoProgress"
                          :style="{
                            width: ((item.value * 1) / maxWidth) * 100 + '%',
                          }"
                        ></div>
                        <div
                          class="titleInfo"
                          :style="{
                            left: ((item.value * 1) / maxWidth) * 100 + 4 + '%',
                          }"
                        >
                          <span class="name">{{ item.name }}</span>
                          <span class="value">{{ item.value }}</span>
                        </div>
                      </div>
                      <div class="inlineB imageBox">
                        <img
                          :src="
                            require('../../assets/' + (index * 1 + 1) + '.png')
                          "
                          alt
                        />
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </el-col>
            <el-col class="elcol" :span="isEsUser() ? 12 : 24">
              <div class="left drawbg" style="padding-bottom: 0">
                <div class="title">预警中心</div>
                <div id="warningcenter" class="chartbg"></div>
              </div>
            </el-col>
          </el-row>
          <el-row
            class="left-bottom"
            :gutter="10"
            style="height: calc(50% - 5px)"
          >
            <el-col :span="12" class="elcol">
              <div class="left drawbg">
                <div class="title">投诉举报</div>
                <div id="complaint" class="chartbg"></div>
              </div>
            </el-col>
            <el-col :span="12" class="elcol">
              <div class="left drawbg autoPadding">
                <div class="title">违法记载</div>
                <!-- <div v-if="isEsUser()" :class="isLow ? 'info' : 'info isLow'">
                                    <el-row class="infoTitle">
                                        <el-col :span="8">
                                            <p class="dataNum">
                                                {{
                                                    recordsData.total
                                                        | splitNumber
                                                }}
                                            </p>
                                            <p class="numDesc">案件数</p>
                                        </el-col>
                                        <el-col :span="8">
                                            <p class="dataNum">
                                                {{
                                                    recordsData.success
                                                        | splitNumber
                                                }}
                                            </p>
                                            <p class="numDesc">结案数</p>
                                        </el-col>
                                        <el-col :span="8">
                                            <p class="dataNum">
                                                {{ recordsData.scale }}
                                            </p>
                                            <p class="numDesc">结案比例</p>
                                        </el-col>
                                    </el-row>
                                    <div class="picBox" style="height: 19px">
                                        <img
                                            class="linePic"
                                            style="height: 12px"
                                            src="../../assets/throughLine.png"
                                            alt
                                        />
                                    </div>
                                </div> -->
                <div id="records" class="chartbg"></div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8" class="elcol">
          <div class="right drawbg">
            <div class="title">
              <span>待完善项目</span>
              <span class="desc">（仅统计已开工项目）</span>
            </div>
            <improvingProject
              :areaId="areaId"
              :isNmUsers="isNmUsers"
              :isEsUsers="isEsUsers"
              :isYSs="isYSs"
              :isCcUsers="isCcUsers"
              :isXsbnUsers="isXsbnUsers"
              :isJjUsers="isJjUsers"
            ></improvingProject>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import improvingProject from './improvingProject'
import highRate from './riskwarning/highRate.json'
import complain from './riskwarning/complain.json'
import warningcenter from './riskwarning/warningcenter.json'
import records from './riskwarning/records.json'

export default {
  name: 'Riskwarning',
  components: {
    improvingProject,
  },
  props: {
    areaId: {
      type: String,
      default: '2',
    },
    isFullScreen: {
      type: Boolean,
      default: '',
    },
  },
  watch: {
    areaId(newValue, oldValue) {
      this.getAutoData()
    },
  },
  data() {
    return {
      highrateData: [], //案件高发地
      complaintData: [], //投诉举报
      warningcenterData: [], //预警数
      recordsData: {
        total: '',
        scale: '',
        success: '',
      }, //违法记载
      isWidth: true,
      isLow: false,
      // areaId: '150100',
      isNmUsers: false,
      isEsUsers: false,
      isYSs: false,
      isCcUsers: false,
      isXsbnUsers: false,
      isJjUsers: false,
    }
  },
  computed: {
    maxWidth() {
      let max = this.highrateData[0].value * 1
      for (let i = 0; i < this.highrateData.length - 1; i++) {
        max =
          max < this.highrateData[i + 1].value * 1
            ? this.highrateData[i + 1].value * 1
            : max
      }
      return max
    },
  },
  created() {
    if (this.isNmUser()) {
      this.isNmUsers = true
    }
    if (this.isEsUser()) {
      this.isEsUsers = true
    }
    if (this.isYS()) {
      this.isYSs = true
    }
    if (this.isCCUser()) {
      this.isCcUsers = true
    }
    if (this.isXSBNUser()) {
      this.isXsbnUsers = true
    }
    if (this.isJjUser()) {
      this.isJjUsers = true
    }
  },
  mounted() {
    const windowWidth = window.screen.width
    const windowHeight = window.screen.height
    if (windowWidth <= 1600) {
      this.isWidth = false
    }
    if (windowWidth <= 1366 && windowHeight <= 864) {
      this.isLow = true
    }
    this.getAutoData()
  },
  methods: {
    drawComplaint(id, complainData) {
      let size = 12
      if (!this.isWidth) {
        size = 10
      }
      let colorArr = ['#26BBFF']
      let legendData = [
        {
          name: '投诉举报数',
          textStyle: {
            color: '#26BBFF',
            fontSize: 12,
          },
        },
      ]
      let seriesArr = [
        {
          name: '投诉举报数',
          type: 'bar',
          stack: 'complain',
          barMaxWidth: 30,
          barCategoryGap: '50%',
          data: complainData[1],
        },
      ]
      if (this.isEsUser()) {
        colorArr = ['#52FFAC', '#26BBFF']
        legendData = [
          // {
          //     name: "投诉举报数",
          //     textStyle: {
          //         color: "#26BBFF",
          //         fontSize: 12,
          //     },
          // },
          {
            name: '办结数',
            textStyle: {
              color: '#52FFAC',
              fontSize: 12,
            },
          },
        ]
        seriesArr = [
          {
            name: '办结数',
            type: 'bar',
            stack: 'complain',
            data: complainData[1],
          },
          // {
          //     name: "投诉举报数",
          //     type: "bar",
          //     stack: "complain",
          //     barMaxWidth: 30,
          //     barCategoryGap: "50%",
          //     data: complainData[1],
          // }
        ]
      }
      let doubleBarChart = echarts.init(document.getElementById(id))
      doubleBarChart.setOption({
        color: colorArr,
        toolbox: { show: false },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: legendData,
          top: 5,
          right: 15,
          itemWidth: 10,
          itemHeight: 10,
        },
        grid: {
          top: '22%',
          left: '3%',
          right: '5%',
          bottom: '5%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: { interval: 0 },
            axisLine: {
              lineStyle: {
                color: '#FFFFFF',
                width: 0.5,
              },
            },
            nameTextStyle: {
              fontSize: '12',
              color: '#7193B2',
              fontStyle: 'oblique',
            },
            axisTick: {
              alignWithLabel: true,
            },
            data: complainData[0],
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: false,
              lineStyle: {
                fontSize: 12,
                color: '#FFFFFF',
              },
            },
            splitLine: {
              lineStyle: {
                color: '#416180',
                width: 0.5,
              },
            },
            axisTick: {
              show: false,
            },
            name: '单位：个',
            nameLocation: 'end',
            // nameGap: 22,
            nameTextStyle: {
              align: 'center',
              fontSize: size,
              padding: [0, 0, 0, 0],
            },
          },
        ],
        series: seriesArr,
      })
      window.addEventListener('resize', () => {
        if (this.complaintChart) {
          this.complaintChart.resize()
        }
      })
    },
    drawWarningcenter(id, warningcenterData) {
      let xAxisData = warningcenterData[2]
      let totalData = warningcenterData[0]
      let handleData = warningcenterData[1]
      // warningcenterData.forEach((v) => {
      //     xAxisData.push(v.typeName);
      //     totalData.push(v.totalCount);
      //     handleData.push(v.handleCount);
      // });
      let size = 12
      let nameSize = 12
      if (!this.isWidth) {
        size = 9
        nameSize = 10
      }
      this.warningCenterChart = echarts.init(document.getElementById(id))
      this.warningCenterChart.setOption({
        color: ['#52ffac', '#26BBFF'],
        toolbox: { show: false },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: [
            {
              name: '预警数',
              // icon: "rect",
              textStyle: {
                color: '#26BBFF',
                fontSize: 12,
              },
            },
            {
              name: '处理数',
              // icon: "rect",
              textStyle: {
                color: '#52FFAC',
                fontSize: 12,
              },
            },
          ],
          top: 5,
          right: 15,
          itemWidth: 10,
          itemHeight: 10,
        },
        grid: {
          top: '22%',
          left: '3%',
          // left: "5%",
          right: '3%',
          // right: "5%",
          bottom: '1%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#FFFFFF',
                width: 0.5,
              },
            },
            nameTextStyle: {
              fontSize: 12,
              color: '#7193B2',
              fontStyle: 'oblique',
            },
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            axisLabel: {
              show: true,
              rotate: 45,
              fontSize: size,
              interval: 0, //标签全显示
              // formatter: function (val) {
              //     var strs = val.split(""); //字符串数组
              //     var str = "";
              //     for (var i = 0, s; (s = strs[i++]); ) {
              //         //遍历字符串数组
              //         str += s;
              //         if (!(i % 4)) str += "\n"; //按需要求余
              //     }
              //     return str;
              // },
            },
            data: xAxisData,
          },
        ],
        // dataZoom: [
        //     {
        //         type: "slider",
        //         show: false, //flase直接隐藏图形
        //         // xAxisIndex: [0],
        //         // left: "9%", //滚动条靠左侧的百分比
        //         height:15,
        //         bottom: 0,
        //         start: 0, //滚动条的起始位置
        //         end: 50, //滚动条的截止位置（按比例分割你的柱状图x轴长度）
        //     },
        // ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: false,
              lineStyle: {
                fontSize: 12,
                color: '#FFFFFF',
              },
            },
            splitLine: {
              lineStyle: {
                color: '#416180',
                width: 0.5,
              },
            },
            axisTick: {
              show: false,
            },
            name: '单位：个',
            nameLocation: 'end',
            // nameGap: 22,
            nameTextStyle: {
              align: 'center',
              fontSize: nameSize,
              padding: [0, 40, 0, 0],
            },
          },
        ],
        series: [
          {
            name: '处理数',
            type: 'bar',
            stack: 'complain',
            // barWidth: 10, //柱图宽度
            data: handleData,
          },
          {
            name: '预警数',
            type: 'bar',
            stack: 'complain',
            // barWidth: 10, //柱图宽度
            // label: {
            //     show: true,
            //     position: "inside",
            //     color: "#fff",
            //     formatter: (params) => {
            //         return `${params.value}`;
            //     },
            // },
            barMaxWidth: 30,
            barCategoryGap: '50%',
            data: totalData,
          },
        ],
      })
      window.addEventListener('resize', () => {
        this.warningCenterChart.resize()
      })
    },
    drawRecords(id, recordsData) {
      let topPos = null
      topPos = this.isEsUser() ? '65%' : '60%'
      // let topPos = "65%";
      let labelStr = `{a|{b}\n}{b|}\n{c|{d}%}  {a|{c}个}`
      let autoWidth = 100
      let size = 12
      if (!this.isWidth) {
        topPos = this.isEsUser() ? '73%' : '68%'
        // topPos = "73%";
        // labelStr = `{a|{b}\n}{b|}\n{c|{d}%}\n{a|{c}个}`;
        // autoWidth = 60;
        size = 10
      }
      // const { id, color } = params
      this.recordsChart = echarts.init(document.getElementById(id))
      // const colors = color || [
      //     "#6FFEB0",
      //     "#6DEFFF",
      //     "#FBF592",
      //     "#F44153",
      // ];
      this.recordsChart.setOption({
        color: ['#26BBFF', '#FBF592', '#F44153'],
        legend: {
          data: [
            {
              name: '一般',
              textStyle: {
                color: '#26BBFF',
              },
            },
            {
              name: '严重',
              textStyle: {
                color: '#FBF592',
              },
            },
            {
              name: '重大',
              textStyle: {
                color: '#F44153',
              },
            },
          ],
          top: 5,
          right: 15,
          itemWidth: 10,
          itemHeight: 10,
        },
        // grid: {
        //     left: "10%",
        //     right: "4%",
        //     top: "20%",
        //     bottom: "5%",
        //     containLabel: true,
        // },
        tooltip: {
          trigger: 'item', //饼图悬浮提示
        },
        series: [
          {
            name: '违法记载',
            type: 'pie',
            // radius: ["30%", "42%"],
            radius: ['30%', '40%'],
            // top: "50%",
            // avoidLabelOverlap: false,
            center: ['50%', topPos],
            label: {
              normal: {
                show: true,
                position: 'outside',
                rich: {
                  a: {
                    color: '#fff',
                    lineHeight: 17,
                    align: 'left',
                    fontSize: size,
                  },
                  b: {
                    backgroundColor: '#52FFAC',
                    width: autoWidth,
                    height: 2,
                  },
                  c: {
                    color: '#FED857',
                    lineHeight: 17,
                    align: 'left',
                    fontSize: size,
                  },
                },
                // formatter: `{a|{b}\n}{b|}\n{c|{d}%}  {a|{c}个}`,
                formatter: labelStr,
              },
              // position: "outer",
              // alignTo: "labelLine",
              // margin: 10,
            },
            labelLine: {
              show: true,
            },
            emphasis: {
              radius: ['30%', '45%'],
              label: {
                show: true,
                fontWeight: 'bold',
              },
            },
            // tooltip:{
            //     position
            // },
            // left: "5%",
            // right: "5%",
            data: recordsData,
          },
        ],
      })
      window.addEventListener('resize', () => {
        this.recordsChart.resize()
      })
    },
    getAutoData() {
      this.getHightData(this.areaId)
      this.getComplainData(this.areaId)
      this.getWarningData(this.areaId)
      this.getRecordsData(this.areaId)
    },
    // 获取案件高发数据
    getHightData(areaId) {
      if (!this.isEsUsers) {
        return this.getFakeHightData(areaId)
      } else {
        return this.getRealHightData(areaId) //恩施调用接口
      }
    },
    getFakeHightData(areaId) {
      let fakeHighrateData = null
      if (this.isYSs) {
        fakeHighrateData = highRate[0]
      } else if (this.isNmUsers) {
        fakeHighrateData = highRate[1]
      } else if (this.isCcUsers) {
        fakeHighrateData = highRate[3]
      } else if (this.isXsbnUsers) {
        fakeHighrateData = highRate[4]
      } else if (this.isJjUsers) {
        fakeHighrateData = highRate[5]
      } else if (this.isYichunUser()) {
        fakeHighrateData = highRate[6]
      } else if (this.isYinChuanUser()) {
        fakeHighrateData = highRate[7]
      } else {
        fakeHighrateData = highRate[2]
      }
      if (fakeHighrateData[areaId]) {
        this.highrateData = fakeHighrateData[areaId]
      } else {
        let index = 0
        if (Object.keys(fakeHighrateData).length > 0) {
          Object.keys(fakeHighrateData).forEach((v, i) => {
            if ((v + '').length == (areaId + '').length) {
              index = i
            }
          })
        }
        this.highrateData =
          fakeHighrateData[Object.keys(fakeHighrateData)[index]]
      }
    },
    getRealHightData(areaId) {
      return this.axios({
        method: 'post',
        url: 'api-r/rightbackpay/expand/findcountbyarea',
        data: {
          areaId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            const { result } = response.data
            for (let i = 0; i < result.length; i++) {
              let obj = {}
              obj.name = result[i].areaName
              obj.value = result[i].count
              this.highrateData.push(obj)
            }
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          this.$message.error(error.response.data)
        })
    },
    // 获取投诉举报数据
    getComplainData(areaId) {
      if (this.isEsUser()) {
        //恩施地区
        return this.getApiComplainData(areaId)
      } else {
        //地区
        return this.getRealComplainData(areaId)
      }
    },
    getRealComplainData(areaId) {
      return this.axios({
        method: 'post',
        url: '/api-r/rightscomplainthandle/expand/complainreport',
        data: {
          areaId,
        },
      })
        .then((response) => {
          if (response.data.hasError) {
            this.$message.error(response.data.errorMsg)
          } else {
            let nameArray = []
            let firstNumArray = []
            const dataList = response.data.result
            if (dataList) {
              dataList.forEach((item) => {
                nameArray.push(item.name + '月')
                firstNumArray.push(item.value)
              })
            }
            this.complaintData[0] = nameArray
            this.complaintData[1] = firstNumArray
            this.drawComplaint('complaint', this.complaintData)
          }
        })
        .catch((error) => {
          this.$message.error(error.response.data)
        })
    },
    getApiComplainData(areaId) {
      return this.axios({
        method: 'post',
        url: '/api-r/rightbackpay/expand/findcountbymonth',
        data: {
          areaId,
        },
      })
        .then((response) => {
          if (response.data.hasError) {
            this.$message.error(response.data.errorMsg)
          } else {
            let nameArray = []
            let firstNumArray = []
            const { result } = response.data
            for (let i = 0; i < result.length; i++) {
              nameArray.push(result[i].name + '月')
              firstNumArray.push(result[i].value)
            }
            this.complaintData[0] = nameArray
            this.complaintData[1] = firstNumArray
            this.drawComplaint('complaint', this.complaintData)
          }
        })
        .catch((error) => {
          this.$message.error(error.response.data)
        })
    },
    getFakeComplainData(areaId) {
      let fakeComplainData = null
      if (this.isYSs) {
        fakeComplainData = complain[0]
      } else if (this.isNmUsers) {
        fakeComplainData = complain[1]
      } else if (this.isCcUsers) {
        fakeComplainData = complain[3]
      } else if (this.isXsbnUsers) {
        fakeComplainData = complain[4]
      } else if (this.isJjUsers) {
        fakeComplainData = complain[5]
      } else if (this.isYichunUser()) {
        fakeComplainData = complain[6]
      } else if (this.isYinChuanUser()) {
        fakeComplainData = complain[7]
      } else {
        fakeComplainData = complain[2]
      }
      let data = []
      if (fakeComplainData[areaId]) {
        data = fakeComplainData[areaId]
      } else {
        let index = 0
        if (Object.keys(fakeComplainData).length > 0) {
          Object.keys(fakeComplainData).forEach((v, i) => {
            if ((v + '').length == (areaId + '').length) {
              index = i
            }
          })
        }
        data = fakeComplainData[Object.keys(fakeComplainData)[index]]
      }
      this.complaintData = []
      let totalData = data.map((v) => v.total)
      let successData = data.map((v) => v.success)
      let monthData = data.map((v) => v.name)
      this.complaintData[0] = monthData.reverse()
      this.complaintData[1] = totalData.reverse()
      this.complaintData[2] = successData.reverse()
      this.drawComplaint('complaint', this.complaintData)
    },
    // 获取违法记载数据
    getRecordsData(areaId) {
      return this.getRealRecordsData(areaId)
      // if (!this.isEsUsers) {
      //     return this.getRealRecordsData(areaId);
      // } else {
      //     return this.getFakeRecordsData(areaId);
      // }
    },
    getRealRecordsData(areaId) {
      return this.axios({
        method: 'post',
        url: '/api-r/rightsdispute/expand/alertrightsrecord',
        data: {
          areaId,
        },
      })
        .then((response) => {
          if (response.data.hasError) {
            this.$message.error(response.data.errorMsg)
          } else {
            this.recordsData.data = response.data.result
            this.drawRecords('records', this.recordsData.data)
          }
        })
        .catch((error) => {
          this.$message.error(error.response.data)
        })
    },
    getFakeRecordsData(areaId) {
      let fakeRecordsData = null
      if (this.isYSs) {
        fakeRecordsData = records[0]
      } else if (this.isNmUsers) {
        fakeRecordsData = records[1]
      } else if (this.isCcUsers) {
        fakeRecordsData = records[3]
      } else if (this.isXsbnUsers) {
        fakeRecordsData = records[4]
      } else if (this.isJjUsers) {
        fakeRecordsData = records[5]
      } else if (this.isYichunUser()) {
        fakeRecordsData = records[6]
      } else if (this.isYinChuanUser()) {
        fakeRecordsData = records[7]
      } else {
        fakeRecordsData = records[2]
      }
      let data = []
      if (fakeRecordsData[areaId]) {
        data = fakeRecordsData[areaId]
      } else {
        let index = 0
        if (Object.keys(fakeRecordsData).length > 0) {
          Object.keys(fakeRecordsData).forEach((v, i) => {
            if ((v + '').length == (areaId + '').length) {
              index = i
            }
          })
        }
        data = fakeRecordsData[Object.keys(fakeRecordsData)[index]]
      }
      this.recordsData.data = []
      data.forEach((v) => {
        if (v.name === '案件数') {
          this.recordsData.total = v.value
        } else if (v.name === '结案数') {
          this.recordsData.success = v.value
        } else if (v.name === '结案比例') {
          this.recordsData.scale = v.value
        } else {
          this.recordsData.data.push(v)
        }
      })
      this.drawRecords('records', this.recordsData.data)
    },
    // 获取预警中心数据
    getWarningData(areaId) {
      this.getRealWarningData(areaId)
    },
    getRealWarningData(areaId) {
      return this.axios({
        method: 'post',
        url: '/api-a/cs/alert/expand/databigalertstats',
        data: {
          areaId,
        },
      }).then((response) => {
        if (response.data.hasError) {
          this.$message.error(response.data.errorMsg)
        } else {
          // const data = response.data.result;
          var data = ''
          if (this.isEsUsers) {
            data = [
              {
                typeName: '专户未开设预警',
                typeId: '01',
                totalCount: 19,
                handleCount: 18,
              },
              {
                typeName: '童工预警',
                typeId: '02',
                totalCount: 0,
                handleCount: 0,
              },
              {
                typeName: '考勤异常预警',
                typeId: '03',
                totalCount: 0,
                handleCount: 0,
              },
              {
                typeName: '实名制考勤预警',
                typeId: '03',
                totalCount: 0,
                handleCount: 0,
              },
              {
                typeName: '工资拖欠预警',
                typeId: '04',
                totalCount: 30,
                handleCount: 28,
              },
              {
                typeName: '专户账号错误预警',
                typeId: '09',
                totalCount: 50,
                handleCount: 43,
              },
              {
                typeName: '工资保证金预警',
                typeId: '12',
                totalCount: 43,
                handleCount: 41,
              },
              {
                typeName: '维权公示牌预警',
                typeId: '13',
                totalCount: 13,
                handleCount: 12,
              },
              {
                typeName: '工伤保险预警',
                typeId: '14',
                totalCount: 41,
                handleCount: 32,
              },
            ]
          } else {
            data = response.data.result
          }

          if (this.isCzUser()) {
            data.forEach((v, i) => {
              if (v.typeName == '未创建拨付计划预警' && v.typeId == '08') {
                data.splice(i, 1)
              }
            })
          }
          let totalData = data.map((v) => v.totalCount)
          let successData = data.map((v) => v.handleCount)
          let typeData = data.map((v) => v.typeName)
          this.warningcenterData[0] = totalData
          this.warningcenterData[1] = successData
          this.warningcenterData[2] = typeData
          this.drawWarningcenter('warningcenter', this.warningcenterData)
        }
      })
      // .catch((error) => {
      //     this.$message.error(error.response.data);
      // });
    },
    getFakeWarningData(areaId) {
      let fakeWarningData = null
      if (this.isYSs) {
        fakeWarningData = warningcenter[0]
      } else if (this.isNmUsers) {
        fakeWarningData = warningcenter[1]
      } else if (this.isCcUsers) {
        fakeWarningData = warningcenter[2]
      } else if (this.isXsbnUsers) {
        fakeWarningData = warningcenter[3]
      } else if (this.isJjUsers) {
        fakeWarningData = warningcenter[4]
      } else if (this.isYichunUser()) {
        fakeWarningData = warningcenter[5]
      } else if (this.isYinChuanUser()) {
        fakeWarningData = warningcenter[6]
      }
      let data = []
      if (fakeWarningData[areaId]) {
        data = fakeWarningData[areaId]
      } else {
        let index = 0
        if (Object.keys(fakeWarningData).length > 0) {
          Object.keys(fakeWarningData).forEach((v, i) => {
            if ((v + '').length == (areaId + '').length) {
              index = i
            }
          })
        }
        data = fakeWarningData[Object.keys(fakeWarningData)[index]]
      }
      let totalData = data.map((v) => v.total)
      let successData = data.map((v) => v.success)
      let typeData = data.map((v) => v.name)
      this.warningcenterData[0] = totalData
      this.warningcenterData[1] = successData
      this.warningcenterData[2] = typeData
      this.drawWarningcenter('warningcenter', this.warningcenterData)
    },
  },
}
</script>

<style scoped lang="less">
.content {
  // border: 1px solid pink;
  width: 100%;
  height: calc(100% - 56px);
  background: #31546b;
  overflow: hidden;
  .screen {
    height: 100%;
    padding: 0;

    .drawbg {
      height: 100%;
      background: rgba(29, 65, 96, 0.5);
      padding: 10px;
      position: relative;
      .title {
        height: 22px;
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 16px;
        line-height: 22px;
        color: #ffffff;
        letter-spacing: 0;
        font-weight: bold;
        &::before {
          content: '';
          background: #265faa;
          display: inline-block;
          width: 3px;
          height: 16px;
          margin-right: 10px;
          position: relative;
          top: 2px;
        }
        .desc {
          font-size: 14px;
          color: #7a8b9b;
        }
      }
      .info {
        width: 100%;
        height: 24%;
        color: #7193b2;
        text-align: center;
        position: absolute;
        top: 50px;
        left: 0;
        .infoTitle {
          height: 50px;
          // overflow: hidden;
          margin-bottom: 10px;
          .numDesc {
            font-size: 14px;
          }
          .dataNum {
            font-size: 20px;
            font-weight: bold;
            color: #53ffac;
            margin-bottom: 5px;
          }
        }
      }
      .chartbg {
        height: 100%;
        overflow: hidden;
        .drawSelf {
          margin-top: 40px;
          height: calc(100% - 40px);
          padding: 10px;
          .drawSelfLi {
            height: calc(100% / 5);
            // padding: 10px 0;
            border-top: 1px solid #1c405b;
            position: relative;
            &:last-child {
              border-bottom: 1px solid #1c405b;
            }
            &:hover {
              background: rgb(72, 97, 116);
              &:after {
                display: block;
                position: absolute;
                top: -30%;
                left: 50%;
                padding: 8px 8px;
                font-size: 12px;
                line-height: 14px;
                text-align: center;
                content: attr(data-title);
                //在这里设内置好title出现的位容置就好了
                color: #ffffff;
                border-radius: 4px;
                background-color: rgba(47, 57, 65, 0.7);
                // &:before{
                //     content: '';
                //     display: block;
                //     position: absolute;
                //     left: 0;
                //     top: 0;
                //     bottom: 0;
                //     margin: auto;
                //     width: 6px;
                //     height: 6px;
                //     background: orange;
                // }
              }
            }
            .inlineB {
              height: 100%;
            }
            .imageBox {
              // width: 12%;
              height: 62%;
              position: absolute;
              right: 5px;
              top: 0;
              bottom: 0;
              margin: auto;
              img {
                // width: 100%;
                height: 100%;
              }
            }
            .progress {
              width: calc(100% - 100px);
              height: 100%;
              position: relative;
              .autoProgress {
                position: absolute;
                left: 5px;
                top: 0;
                bottom: 0;
                margin: auto;
                width: 100%;
                height: 10px;
                background-image: linear-gradient(
                  270deg,
                  #fed857 2%,
                  rgba(83, 255, 172, 0) 100%
                );
                border-radius: 5px;
                border-radius: 5px;
              }
              .titleInfo {
                height: calc(100%);
                width: 60px;
                position: absolute;
                // left: 5px;
                top: 0;
                bottom: 0;
                margin: auto;
                line-height: calc(100%);
                span {
                  display: inline-block;
                  height: 14px;
                  width: 60px;
                  // overflow: hidden;
                }
                .name {
                  font-size: 12px;
                  line-height: 12px;
                  color: #ffffff;
                  position: absolute;
                  // left: 5px;
                  top: calc(50% - 14px);
                  // bottom: 0;
                  // margin: auto;
                }
                .value {
                  font-size: 14px;
                  line-height: 14px;
                  color: #fed857;
                  position: absolute;
                  top: calc(50%);
                }
              }
            }
          }
        }
      }
    }
    .left {
      width: 100%;
      // height: calc((100% - 10px) / 2);
    }
    .right {
      width: 100%;
      height: 100%;
    }
  }
}
.elcol {
  height: 100%;
}
.fullContent {
  height: calc(100% - 120px);
}
@media screen and (max-width: 1366px) {
  .name {
    top: calc(50% - 12px) !important;
  }
  .value {
    height: 12px !important;
    font-size: 12px !important;
    line-height: 12px !important;
  }
  .title {
    font-size: 14px !important;
  }
  .info {
    top: 44px !important;
  }
  .infoTitle {
    height: 30px !important;
    margin-bottom: 5px !important;
    .numDesc {
      font-size: 12px !important;
    }
    .dataNum {
      font-size: 14px !important;
      margin-bottom: 0 !important;
    }
  }
  .drawbg {
    padding-bottom: 0 !important;
  }
  .drawSelf {
    margin-top: 20px !important;
    height: calc(100% - 20px) !important;
  }
  .linePic {
    height: 10px;
  }
}

.isLow {
  top: 50px !important;
  .infoTitle {
    height: 50px !important;
    margin-bottom: 10px !important;
    .numDesc {
      font-size: 14px !important;
    }
    .dataNum {
      font-size: 20px !important;
      margin-bottom: 0 !important;
    }
  }
}
</style>
